<template>
  <div class="">
    <h1>学员管理</h1>

    <el-form :inline="true" :model="form2" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input v-model="form2.name" placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="form2.mobile" placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="form2.status" placeholder="活动区域">
          <el-option label="启用" :value="1"></el-option>
          <el-option label="禁用" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">搜索</el-button>
        <el-button type="primary" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- element-ui下的表格没有v-for了 而是用:data表示要循环的数据 -->
    <!-- column代表列 prop代表直接展示这个字段 ，假设这个字段要进行过滤 图片的路径 展示的不是原本的数据的时候 用插槽 -->

    <el-button @click="removeall">选中删除</el-button>
    <el-table
      :data="res"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="change"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <!-- <el-table-column label="日期" width="120">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column> -->

      <el-table-column label="头像" width="120">
        <template slot-scope="scope">
          <!-- {{ scope.row }} -->
          <!-- 代表这一行的数据 -->
          {{ scope.$index }}
          <!-- 代表下标 -->

          <img class="imgs" :src="scope.row.avatar" alt="" />
        </template>
      </el-table-column>
      <el-table-column prop="nickname" label="姓名" width="120">
      </el-table-column>
      <el-table-column prop="mobile" label="电话" show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="状态" show-overflow-tooltip>
        <template slot-scope="scope">
          <div>
            {{ scope.row.status ? "启用" : "禁用" }}
          </div>
        </template>
      </el-table-column>

      <el-table-column label="创建时间">
        <template slot-scope="scope">
          <div>
            {{ scope.row.created_at | filtime }}
          </div>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <div>
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              @click="edit(scope.row, scope.$index)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click="remove(scope.$index)"
            ></el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      layout="prev, pager, next"
      :total="list.length"
      :page-size="pagesize"
      :current-page="pagenum"
      @current-change="changenum"
    >
    </el-pagination>

    <el-dialog title="收货地址" :visible.sync="show">
      <el-form :model="form">
        <el-form-item label="姓名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="电话号码">
          <el-input v-model="form.mobile"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="form.status" placeholder="请选择状态">
            <el-option label="启用" :value="1"></el-option>
            <el-option label="禁用" :value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="update">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      show: false,
      form: {
        name: "",
        mobile: "",
        status: 0,
      },
      editindex: -1,

      form2: {
        name: "",
        mobile: "",
        status: "",
      },
      copylist: [],
      removeids: [],
      pagesize: 3,
      pagenum: 1,
    };
  },

  mounted() {
    this.$axios.get("list.json").then((res) => {
      console.log(res);
      this.list = res.data;
      this.copylist = this.list;
    });
  },
  methods: {
    remove(index) {
      this.$alert("是否要删除", "删除", {
        confirmButtonText: "确定",
        callback: (action) => {
          this.list.splice(index, 1);
          this.$message({
            type: "info",
            message: `删除成功`,
          });
        },
      });
    },

    edit(item, index) {
      this.show = true;
      this.editindex = index;
      //把要编辑的数据的下标保存下来
      this.form.name = item.nickname;
      this.form.mobile = item.mobile;
      this.form.status = item.status;
    },
    //点击修改按钮
    update() {
      this.list[this.editindex].nickname = this.form.name;
      this.list[this.editindex].mobile = this.form.mobile;
      this.list[this.editindex].status = this.form.status;
      this.show = false;
    },
    //点击弹框的确定按钮根据保存的下标修改数据

    search() {
      // if (this.form2.status === "") {
      //   this.list = this.copylist.filter((item) => {
      //     return (
      //       item.nickname.includes(this.form2.name) &&
      //       item.mobile.includes(this.form2.mobile)
      //     );
      //   });
      // } else {
      this.list = this.copylist.filter((item) => {
        return (
          item.nickname.includes(this.form2.name) &&
          item.mobile.includes(this.form2.mobile) &&
          item.status == this.form2.status
        );
      });
      // }
    },
    //搜索

    reset() {
      this.list = this.copylist;
      this.form2 = {};
    }, //重置

    change(val) {
      // 默认的参数val就是选中的数组，放的是整条数据，但是我们想要id实现选中删除
      console.log(val);
      // [
      //   { nickname: "", mobile: "", id: "" },
      //   { nickname: "", mobile: "", id: "" },
      //   { nickname: "", mobile: "", id: "" },
      // ].includes(item.id)
      // [123,3,4,5,5]
      this.removeids = [];
      val.forEach((item) => {
        this.removeids.push(item.uid);
      });
    },
    //当复选框改变时就会触发

    removeall() {
      this.list = this.list.filter((item) => {
        return this.removeids.includes(item.uid) == false;
      });
    },
    //选中删除

    changenum(val) {
      console.log(val);
      this.pagenum = val;
      //把当前是哪一页 保存下来
    },
  },
  computed: {
    res() {
      return this.list.slice(
        (this.pagenum - 1) * this.pagesize,
        this.pagenum * this.pagesize
      );
      //通过计算属性对数据进行切割
      // (0,5)
      // (5,10)
      // (10,15)
    },
  },
  components: {},
  filters: {
    filtime(val) {
      return new Date(val * 1000).toLocaleString();
    },
  },
};
</script>

<style lang="scss" scoped>
.imgs {
  width: 50px;
  height: 50px;
}
</style>
